<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Utils | Framework7 Documentation</title>
    <meta property="og:image" content="http://framework7.io/i/f7-banner.jpg">
    <meta name="viewport" content="width=device-width, viewport-fit=cover">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:site" content="@framework7io">
    <meta name="twitter:creator" content="@framework7io">
    <meta name="twitter:title" content="Utils | Framework7 Documentation">
    <meta name="twitter:image" content="https://avatars0.githubusercontent.com/u/31954178?s=200&amp;v=4">
    <link rel="stylesheet" href="/framework7-v3/css/normalize.css">
    <link rel="stylesheet" href="/framework7-v3/css/main.css">
    <link rel="shortcut icon" href="/framework7-v3/i/favicon.png">
    <script src="/framework7-v3/js/modernizr-2.7.1.min.js"></script>
  </head>
  <body class="body-docs">
    <header class="internal-header">
      <div class="center">
        <div class="logo-holder"><a class="logo" href="/framework7-v3/"></a></div>
        <div class="header-content">
          <div class="title">Framework7
            <div class="version">v3.6.7</div>
          </div>
          <ul class="nav">
            <li><a href="/framework7-v3/docs/">Docs</a>
              <ul>
                <li><a href="/framework7-v3/docs/introduction.html">Getting Started</a></li>
                <li><a href="/framework7-v3/docs/">Framework7 Core / API</a></li>
                <li><a href="/framework7-v3/vue/">Framework7 Vue</a></li>
                <li><a href="/framework7-v3/react/">Framework7 React</a></li>
                <li><a href="https://framework7.io/icons/" target="_blank">Framework7 Icons</a></li>
                <li><a href="/framework7-v3/docs/dom7.html">Dom7</a></li>
                <li><a href="http://idangero.us/template7/" target="_blank">Template7</a></li>
              </ul>
            </li>
            <li><a href="#">Resources</a>
              <ul>
                <li><a href="http://forum.framework7.io" target="_blank">Community Forum</a></li>
                <li><a href="https://framework7.io/tutorials/" target="_blank">Tutorials</a></li>
                <li><a href="https://framework7.io/templates/" target="_blank">Templates</a></li>
                <li><a href="https://framework7.io/plugins/" target="_blank">Plugins</a></li>
                <li><a href="https://framework7.io/showcase/" target="_blank">Apps Showcase</a></li>
                <li><a href="https://jobs.framework7.io" target="_blank">Jobs & Developers</a></li>
              </ul>
            </li>
            <li><a href="http://blog.framework7.io" target="_blank">Blog</a></li>
            <li><a href="https://framework7.io/contribute/" target="_blank">Contribute</a></li>
          </ul>
          <div class="patreon-github"><a class="patreon-button" href="https://www.patreon.com/vladimirkharlampidi" target="_blank"><span class="patreon-logo"></span><span class="patreon-text">Support Framework7</span></a>
            <div class="github-buttons"><a href="https://github.com/framework7io/framework7/" target="_blank"><img src="/framework7-v3/i/gh-logo.png"></a><a class="gh-stars" href="https://github.com/framework7io/framework7/" target="_blank"><span></span> stars</a><a class="gh-forks" href="https://github.com/framework7io/framework7/" target="_blank"><span></span> forks</a></div>
          </div>
        </div>
      </div>
    </header>
    <div class="bsa-cpc"></div>
    <main>
      <div class="center">
        <div class="docs-nav">
          <div class="docs-nav-toggle"><span></span><span></span><span></span></div>
          <ul>
            <li>
              <div class="title">Get Started</div>
              <ul>
                <li><a href="introduction.html">Introduction</a></li>
                <li><a href="kitchen-sink.html">Kitchen Sink</a></li>
                <li><a href="installation.html">Installation</a></li>
                <li><a href="app-layout.html">App HTML Layout</a></li>
                <li><a href="rtl-layout.html">RTL Layout</a></li>
                <li><a href="init-app.html">Initialize App</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Events</div>
              <ul>
                <li><a href="events.html">Events</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Router / Navigation</div>
              <ul>
                <li><a href="routes.html">Routes</a></li>
                <li><a href="router-component.html">Router Component</a></li>
                <li><a href="view.html#router-api-methods-properties">Router API</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Components</div>
              <ul>
                <li><a href="app.html">App / Core</a></li>
                <li><a href="accordion.html">Accordion / Collapsible</a></li>
                <li><a href="action-sheet.html">Action Sheet / Actions</a></li>
                <li><a href="autocomplete.html">Autocomplete</a></li>
                <li><a href="badge.html">Badge</a></li>
                <li><a href="block.html">Block / Content Block</a></li>
                <li><a href="button.html">Button</a></li>
                <li><a href="calendar.html">Calendar / Datepicker</a></li>
                <li><a href="cards.html">Cards</a></li>
                <li><a href="checkbox.html">Checkbox</a></li>
                <li><a href="chips.html">Chips / Tags</a></li>
                <li><a href="contacts-list.html">Contacts List</a></li>
                <li><a href="data-table.html">Data Table</a></li>
                <li><a href="dialog.html">Dialog</a></li>
                <li><a href="elevation.html">Elevation</a></li>
                <li><a href="floating-action-button.html">Floating Action Button / FAB</a></li>
                <li><a href="form.html">Form Data / Storage</a></li>
                <li><a href="gauge.html">Gauge</a></li>
                <li><a href="grid.html">Grid / Layout Grid</a></li>
                <li><a href="icons.html">Icons</a></li>
                <li><a href="infinite-scroll.html">Infinite Scroll</a></li>
                <li><a href="inputs.html">Inputs / Form Inputs</a></li>
                <li><a href="lazy-load.html">Lazy Load</a></li>
                <li><a href="link.html">Link</a></li>
                <li><a href="list-view.html">List View</a></li>
                <li><a href="list-index.html">List Index</a></li>
                <li><a href="login-screen.html">Login Screen</a></li>
                <li><a href="messagebar.html">Messagebar</a></li>
                <li><a href="messages.html">Messages</a></li>
                <li><a href="navbar.html">Navbar</a></li>
                <li><a href="notification.html">Notification</a></li>
                <li><a href="page.html">Page</a></li>
                <li><a href="panel.html">Panel / Side Panels</a></li>
                <li><a href="photo-browser.html">Photo Browser</a></li>
                <li><a href="picker.html">Picker</a></li>
                <li><a href="popover.html">Popover</a></li>
                <li><a href="popup.html">Popup</a></li>
                <li><a href="preloader.html">Preloader</a></li>
                <li><a href="progressbar.html">Progressbar</a></li>
                <li><a href="pull-to-refresh.html">Pull to Refresh</a></li>
                <li><a href="radio.html">Radio</a></li>
                <li><a href="range-slider.html">Range Slider</a></li>
                <li><a href="searchbar.html">Searchbar</a></li>
                <li><a href="sheet-modal.html">Sheet Modal</a></li>
                <li><a href="smart-select.html">Smart Select</a></li>
                <li><a href="sortable-list.html">Sortable List</a></li>
                <li><a href="statusbar.html">Statusbar</a></li>
                <li><a href="stepper.html">Stepper</a></li>
                <li><a href="subnavbar.html">Subnavbar</a></li>
                <li><a href="swiper.html">Swiper</a></li>
                <li><a href="swipeout.html">Swipeout</a></li>
                <li><a href="tabs.html">Tabs</a></li>
                <li><a href="timeline.html">Timeline</a></li>
                <li><a href="toast.html">Toast</a></li>
                <li><a href="toggle.html">Toggle</a></li>
                <li><a href="toolbar-tabbar.html">Toolbar / Tabbar</a></li>
                <li><a href="tooltip.html">Tooltip</a></li>
                <li><a href="vi.html">Video Intelligence (vi)</a></li>
                <li><a href="view.html">View / Router</a></li>
                <li><a href="virtual-list.html">Virtual List</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Framework7 Icons</div>
              <ul>
                <li><a href="/icons/">Framework7 Icons Cheatsheet</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Styling</div>
              <ul>
                <li><a href="iphone-x.html">iPhone X</a></li>
                <li><a href="color-themes.html">Color Themes</a></li>
                <li><a href="typography.html">Typography</a></li>
                <li><a href="hairlines.html">Hairlines</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Dom7</div>
              <ul>
                <li><a href="dom7.html">Dom7</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Template7</div>
              <ul>
                <li><a href="template7.html">Template7</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Fast Clicks</div>
              <ul>
                <li><a href="fast-clicks.html">Fast Clicks</a></li>
                <li><a href="active-state.html">Active State</a></li>
                <li><a href="tap-hold.html">Tap Hold Event (Long Tap)</a></li>
                <li><a href="touch-ripple.html">Touch Ripple (MD Theme)</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Utilities</div>
              <ul>
                <li><a href="request.html">Request / Ajax</a></li>
                <li><a href="utils.html">Utils</a></li>
                <li><a href="device.html">Device</a></li>
                <li><a href="support.html">Support</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Plugins API</div>
              <ul>
                <li><a href="plugins-api.html">Plugins API</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Lazy Modules</div>
              <ul>
                <li><a href="lazy-modules.html">Lazy Modules</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Custom Build</div>
              <ul>
                <li><a href="custom-build.html">Custom Build</a></li>
              </ul>
            </li>
          </ul>
        </div>
        <div class="docs-content">
          <div class="improve-docs-link"><a href="https://github.com/gzxishan/framework7-websitev3/edit/master/src/pug/undefined" target="_blank">Improve this Doc</a></div>
          <h1>Utils</h1>
          <ul class="docs-index"></ul>
          <p>Framework7 utils is a set of helper methods that used internally and can be handy during development as well.</p>
          <p>It is avaialable as a <code><b>utils</b></code> property of Framework7 class (<code>Framework7.utils</code>) and same property on initialized app instance (<code>app.utils</code>):</p><pre><code class="js"><span class="token comment">// If we need it in place where we don't have access to app instance or before we init the app</span>
<span class="token keyword">var</span> now <span class="token operator">=</span> Framework7<span class="token punctuation">.</span>utils<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>


<span class="token comment">// After we init the app we can access it as app instance property</span>
<span class="token keyword">var</span> app <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Framework7</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token comment">/*...*/</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> now <span class="token operator">=</span> app<span class="token punctuation">.</span>utils<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</pre></code>
          <h2>Utils Methods</h2>
          <h3>parseUrlQuery</h3>
          <div class="method-wrap">
            <p><span class="method">app.utils.parseUrlQuery(<span>url</span>)</span><span>- parse url query get parameters</span></p>
            <ul class="method-parameters">
              <li><span class="parameter">url</span> - <span class="parameter-type">string</span> - url with GET parameters. Required.</li>
            </ul>
            <p class="method-returns">Method returns object with query parameters</p>
          </div><pre><code class="js"><span class="token keyword">var</span> query <span class="token operator">=</span> app<span class="token punctuation">.</span>utils<span class="token punctuation">.</span><span class="token function">parseUrlQuery</span><span class="token punctuation">(</span><span class="token string">'http://google.com/?id=5&amp;foo=bar'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token built-in">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>query<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// { id: 5, foo: 'bar' }</span>
</pre></code>
          <h3>serializeObject</h3>
          <div class="method-wrap">
            <p><span class="method">app.utils.serializeObject(<span>object</span>)</span><span>- Create a serialized representation of a plain object suitable for use in a URL query string</span></p>
            <ul class="method-parameters">
              <li><span class="parameter">object</span> - <span class="parameter-type">object</span> - Object to serialize</li>
            </ul>
            <p class="method-returns">returns a new unique array</p>
          </div><pre><code class="js"><span class="token keyword">var</span> params <span class="token operator">=</span> <span class="token punctuation">{</span> foo<span class="token punctuation">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span> id<span class="token punctuation">:</span> <span class="token number">5</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token built-in">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>app<span class="token punctuation">.</span>utils<span class="token punctuation">.</span><span class="token function">serializeObject</span><span class="token punctuation">(</span>params<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 'foo=bar&amp;id=5'</span>
</pre></code>
          <h3>requestAnimationFrame</h3>
          <div class="method-wrap">
            <p><span class="method">app.utils.requestAnimationFrame(<span>callback</span>)</span><span>- Cross-browser implementation on requestAnimationFrame</span></p>
            <ul class="method-parameters">
              <li><span class="parameter">callback</span> - <span class="parameter-type">function</span> - function to call when it's time to update your animation for the next repaint</li>
            </ul>
            <p class="method-returns">returns animation request id, that uniquely identifies the entry in the callback list</p>
          </div><pre><code class="js"><span class="token keyword">var</span> animId<span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">anim</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">var</span> left <span class="token operator">=</span> <span class="token function">parseInt</span><span class="token punctuation">(</span><span class="token function">$$</span><span class="token punctuation">(</span><span class="token string">'#anim'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token string">'left'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">;</span>
  <span class="token function">$$</span><span class="token punctuation">(</span><span class="token string">'#anim'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token punctuation">{</span>left<span class="token punctuation">:</span> left <span class="token operator">+</span> <span class="token string">'px'</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
  animId <span class="token operator">=</span> app<span class="token punctuation">.</span>utils<span class="token punctuation">.</span><span class="token function">requestAnimationFrame</span><span class="token punctuation">(</span>anim<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
animId <span class="token operator">=</span> app<span class="token punctuation">.</span>utils<span class="token punctuation">.</span><span class="token function">requestAnimationFrame</span><span class="token punctuation">(</span>anim<span class="token punctuation">)</span><span class="token punctuation">;</span>
</pre></code>
          <h3>cancelAnimationFrame</h3>
          <div class="method-wrap">
            <p><span class="method">app.utils.cancelAnimationFrame(<span>requestID</span>)</span><span>- Cancels an animation frame request</span></p>
            <ul class="method-parameters">
              <li><span class="parameter">requestID</span> - <span class="parameter-type">number</span> - The ID value returned by the call to app.utils.requestAnimationFrame() that requested the callback</li>
            </ul>
          </div><pre><code class="js">app<span class="token punctuation">.</span>utils<span class="token punctuation">.</span><span class="token function">cancelAnimationFrame</span><span class="token punctuation">(</span>animId<span class="token punctuation">)</span><span class="token punctuation">;</span>
</pre></code>
          <h3>removeDiacritics</h3>
          <div class="method-wrap">
            <p><span class="method">app.utils.removeDiacritics(<span>text</span>)</span><span>- Replace diacritics in specified text string with standard latin characters</span></p>
            <ul class="method-parameters">
              <li><span class="parameter">text</span> - <span class="parameter-type">string</span> - Text string</li>
            </ul>
          </div><pre><code class="js"><span class="token keyword">var</span> text <span class="token operator">=</span> app<span class="token punctuation">.</span>utils<span class="token punctuation">.</span><span class="token function">removeDiacritics</span><span class="token punctuation">(</span><span class="token string">'ÁÓL'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token built-in">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>text<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//-> 'AOL'</span>
</pre></code>
          <h3>nextFrame</h3>
          <div class="method-wrap">
            <p><span class="method">app.utils.nextFrame(<span>callback</span>)</span><span>- Executes code on next available animation frame.</span></p>
            <ul class="method-parameters">
              <li><span class="parameter">callback</span> - <span class="parameter-type">string</span> - function to call when it's time to update your animation for the next repaint.</li>
            </ul>
          </div><pre><code class="js">app<span class="token punctuation">.</span>utils<span class="token punctuation">.</span><span class="token function">nextFrame</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// do something on next frame</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</pre></code>
          <h3>nextTick</h3>
          <div class="method-wrap">
            <p><span class="method">app.utils.nextTick(<span>callback</span>, <span>delay</span>)</span><span>- executes code after required delay. Basically alias for <code>setTimeout</code></span></p>
            <ul class="method-parameters">
              <li><span class="parameter">callback</span> - <span class="parameter-type">string</span> - function to call after specified delay</li>
              <li><span class="parameter">delay</span> - <span class="parameter-type">number</span> - delay in ms. <em>Optional, by deault is <code>0</code></em></li>
            </ul>
            <p class="method-returns">returns timeout ID</p>
          </div><pre><code class="js">app<span class="token punctuation">.</span>utils<span class="token punctuation">.</span><span class="token function">nextTick</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// do something on next tick</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</pre></code>
          <h3>now</h3>
          <div class="method-wrap">
            <p><span class="method">app.utils.now()</span><span>- returns current timestamp in ms</span></p>
          </div><pre><code class="js"><span class="token keyword">var</span> now <span class="token operator">=</span> app<span class="token punctuation">.</span>utils<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">var</span> timeDiff <span class="token operator">=</span> app<span class="token punctuation">.</span>utils<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">-</span> now<span class="token punctuation">;</span>
  <span class="token built-in">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>timeDiff <span class="token operator">+</span> <span class="token string">'ms past'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">2000</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></code>
          <h3>extend</h3>
          <div class="method-wrap">
            <p><span class="method">app.utils.extend(<span>target</span>, <span>...from</span>)</span><span>- extends <code>target</code> object with properties and methods from <code>from</code> objects</span></p>
            <ul class="method-parameters">
              <li><span class="parameter">target</span> - <span class="parameter-type">object</span> - target object to extend</li>
              <li><span class="parameter">from</span> - <span class="parameter-type">object</span> - objects to copy properties and methods from</li>
            </ul>
            <p class="method-returns">returns target object with extended properties and methods</p>
          </div>
          <p>This method becomes very handy if you need to extend one object with properties of others or when you need a deep copy of an object.</p><pre><code class="js"><span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token punctuation">{</span>
  apple<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
  cherry<span class="token punctuation">:</span> <span class="token number">97</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token comment">// Pass as empty object as target to copy a into b</span>
<span class="token keyword">var</span> b <span class="token operator">=</span> app<span class="token punctuation">.</span>utils<span class="token punctuation">.</span><span class="token function">extend</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> a<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token built-in">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>b<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// { apple: 0, cherry: 97 }</span>
<span class="token built-in">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a <span class="token operator">===</span> b<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// false</span></pre></code><pre><code class="js"><span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token punctuation">{</span>
  apple<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
  cherry<span class="token punctuation">:</span> <span class="token number">97</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> b <span class="token operator">=</span> <span class="token punctuation">{</span>
  banana<span class="token punctuation">:</span> <span class="token number">10</span><span class="token punctuation">,</span>
  pineapple<span class="token punctuation">:</span> <span class="token number">20</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>

<span class="token comment">// Extends a with b</span>
app<span class="token punctuation">.</span>utils<span class="token punctuation">.</span><span class="token function">extend</span><span class="token punctuation">(</span>a<span class="token punctuation">,</span> b<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token built-in">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// { apple: 0, cherry: 97, banana: 10, pineapple: 20 }</span></pre></code><pre><code class="js"><span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token punctuation">{</span>
  apple<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
  cherry<span class="token punctuation">:</span> <span class="token number">97</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> b <span class="token operator">=</span> <span class="token punctuation">{</span>
  banana<span class="token punctuation">:</span> <span class="token number">10</span><span class="token punctuation">,</span>
  pineapple<span class="token punctuation">:</span> <span class="token number">20</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>

<span class="token comment">// Create new object c from the merge of a and b</span>
<span class="token keyword">var</span> c <span class="token operator">=</span> app<span class="token punctuation">.</span>utils<span class="token punctuation">.</span><span class="token function">extend</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> a<span class="token punctuation">,</span> b<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token built-in">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>c<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// { apple: 0, cherry: 97, banana: 10, pineapple: 20 }</span></pre></code><pre><code class="js"><span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token punctuation">{</span>
  apple<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
  cherry<span class="token punctuation">:</span> <span class="token number">97</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> b <span class="token operator">=</span> <span class="token punctuation">{</span>
  apple<span class="token punctuation">:</span> <span class="token number">10</span><span class="token punctuation">,</span>
  pineapple<span class="token punctuation">:</span> <span class="token number">20</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>

<span class="token comment">// Extend a with b</span>
app<span class="token punctuation">.</span>utils<span class="token punctuation">.</span><span class="token function">extend</span><span class="token punctuation">(</span>a<span class="token punctuation">,</span> b<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token built-in">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// { apple: 10, cherry: 97, pineapple: 20 }</span>
</pre></code>
          <h3>uniqueNumber</h3>
          <div class="method-wrap">
            <p><span class="method">app.utils.uniqueNumber()</span><span>- returns unique number, increased by 1 with every call</span></p>
          </div><pre><code class="js">app<span class="token punctuation">.</span>utils<span class="token punctuation">.</span><span class="token function">uniqueNumber</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// -> 2</span>

app<span class="token punctuation">.</span>utils<span class="token punctuation">.</span><span class="token function">uniqueNumber</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// -> 3</span>

app<span class="token punctuation">.</span>utils<span class="token punctuation">.</span><span class="token function">uniqueNumber</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// -> 4</span>
</pre></code>
          <h3>id</h3>
          <div class="method-wrap">
            <p><span class="method">app.utils.id(<span>mask</span>, <span>map</span>)</span><span>- generates random ID-like string</span></p>
            <ul class="method-parameters">
              <li><span class="parameter">mask</span> - <span class="parameter-type">string</span> - ID string mask, by default is <code>xxxxxxxxxx</code></li>
              <li><span class="parameter">map</span> - <span class="parameter-type">string</span> - characters that will be used for generation, by default is <code>0123456789abcdef</code></li>
            </ul>
            <p class="method-returns">returns randomly generated string</p>
          </div><pre><code class="js">app<span class="token punctuation">.</span>utils<span class="token punctuation">.</span><span class="token function">id</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// -> ffe28ab56e</span>

app<span class="token punctuation">.</span>utils<span class="token punctuation">.</span><span class="token function">id</span><span class="token punctuation">(</span><span class="token string">'xxxx-xxxx-xxxx-xxxx'</span><span class="token punctuation">)</span> <span class="token comment">// -> 1ea3-f127-dc67-627d</span>

app<span class="token punctuation">.</span>utils<span class="token punctuation">.</span><span class="token function">id</span><span class="token punctuation">(</span><span class="token string">'xxxx-xxxx'</span><span class="token punctuation">,</span> <span class="token string">'abcd'</span><span class="token punctuation">)</span> <span class="token comment">// -> aabc-ccda</span></pre></code>
        </div>
      </div>
    </main>
    <script src="/framework7-v3/js/jquery-1.11.0.min.js"></script>
    <script src="/framework7-v3/js/main.js"></script>
  </body>
</html>